<template>
	<view class="page">
		<view class="g-card">
			<div class="m-b-lg">
				<up-form labelPosition="left" :model="form" :rules="rules" ref="formRef" labelWidth="100px">
					<up-form-item label="房间号/桌号" prop="table_num" borderBottom>
						<up-input v-model="form.table_num" placeholder="请输入内容" border="none" clearable></up-input>
					</up-form-item>
					<up-form-item label="桌面二维码" borderBottom>
						<up-input v-model="form.device_id" border="none" clearable></up-input>
						<template #right>
							<button @click="openScan" style="margin-left: 10px;" size="mini">扫一扫</button>
						</template>
					</up-form-item>
					<up-form-item label="设备二维码" borderBottom>
						<up-input v-model="form.bt_id" border="none" clearable></up-input>
						<template #right>
							<button @click="openScanBtCode" style="margin-left: 10px;" size="mini">扫一扫</button>
						</template>
					</up-form-item>
					<up-form-item label="商家" prop="shop_id" borderBottom>
						<text>{{ form.shop_name }}</text>
						<template #right>
							<button :disabled="shopList.length === 0" @click="shopPickerShow = true"
								style="margin-left: 10px;" size="mini">选择</button>
						</template>
					</up-form-item>
				</up-form>
			</div>
			<up-button type="primary" shape="circle" text="绑定" @click="handleSubmit"></up-button>
		</view>
		<up-picker v-if="shopList.length" :show="shopPickerShow" :columns="shopList" keyName="label"
			@cancel="shopPickerShow = false" @confirm="shopConfirm"></up-picker>
	</view>
</template>

<script setup>
	import {
		getQueryString,
	} from '@/common/utils/index.js'
	import api from '@/api/app.js'

	const shopPickerShow = ref(false)
	const shopList = ref([])
	const formRef = ref(null);
	const form = ref({
		table_num: '',
		device_id: '',
		bt_id: '',
		shop_id: '',
		shop_name: '',
	})
	const rules = {
		table_num: {
			type: 'string',
			required: true,
			message: '请完善信息',
			trigger: ['blur', 'change']
		},
		device_id: {
			type: 'string',
			required: true,
			message: '请录入桌面二维码',
			trigger: ['blur', 'change']
		},
		bt_id: {
			type: 'string',
			required: true,
			message: '请录入设备二维码',
			trigger: ['blur', 'change']
		},
		shop_id: {
			type: 'number',
			required: true,
			message: '请选择商家',
			trigger: ['blur', 'change']
		},
	}

	function getShopList() {
		return api.getShopList({}).then(res => {
			const list = res.data.data.map(item => {
				return {
					label: item.nickname,
					id: item.shop_id,
				}
			})
			shopList.value = [list];
		})
	}

	function handleSubmit() {
		formRef.value.validate().then(valid => {
			if (valid) {
				api.deviceBind(form.value).then(res => {
					uni.showToast({
						icon: 'success',
						title: '绑定成功'
					})
					setTimeout(() => {
						uni.navigateBack()
					}, 1000)
				})
			}
		}).catch(() => {
			// 处理验证错误  
		});
	}

	function openScan() {
		uni.scanCode({
			scanType: ['qrCode'],
			success(res) {
				const url = res.result
				// if (!url.includes('koc365')) {
				// 	uni.$u.toast('请扫描元族设备二维码')
				// } else 
				if (!url.includes('deviceCode')) {
					uni.$u.toast('获取设备号失败')
				} else {
					const deviceCode = getQueryString(url, 'deviceCode')
					form.value.device_id = deviceCode
					// uni.$u.toast(`获取成功：${deviceCode}`)
				}
				// console.log('条码内容：' + res.result);
			}
		})
	}

	function openScanBtCode() {
		uni.scanCode({
			scanType: ['qrCode'],
			success(res) {
				const url = res.result
				if (!url.includes('deviceCode')) {
					uni.$u.toast('获取设备号失败')
				} else {
					const deviceCode = getQueryString(url, 'deviceCode')
					form.value.bt_id = deviceCode
					// uni.$u.toast(`获取成功：${deviceCode}`)
				}
			}
		})
	}

	function shopConfirm(e) {
		if (e.value && e.value[0]) {
			const target = e.value[0]
			form.value.shop_id = target.id
			form.value.shop_name = target.label
		}
		shopPickerShow.value = false
	}

	onLoad(() => {
		getShopList()
	})
</script>

<style lang="scss" scoped>
	.page {
		padding: 16px;
	}
</style>